<template>
  <div class="feePage">
    <Row>
      <Col span="12">
      <p style="color: rgb(102, 102, 102); height: 24px; line-height: 34px;">
        <span>收/退款数据</span>
      </p>
      </Col>
      <Col span="12">
      <Button icon="md-add" size="small" @click="addFee"
        style="color: rgb(153, 153, 153); float: right;font-size: 12px;">新增收款</Button>
      </Col>
      <Col span="24" style="padding-top: 10px;">
      <Table :columns="feeColumns" :data="feeData"></Table>
      </Col>
    </Row>
    <Modal v-model="addFeeModal" title="新增收款 - 未知" @on-ok="ok" @on-cancel="cancel">
      <Form :model="addFeeForm" :rules="addFeeFormFules" ref="invitationFormRef" label-position="top">
        <Row :gutter="26">
          <Col span="12">
            <FormItem label="收款金额">
              <Input icon="logo-yen" type="number" placeholder="收款金额"></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="分店">
              <Select clearable placeholder="分店">
                <Option value="电商中心">电商中心</Option>
                <Option value="化州店">化州店</Option>
                <Option value="吴川店">吴川店</Option>
                <Option value="廉江店">廉江店</Option>
                <Option value="高州店">高州店</Option>
                <Option value="茂名总店">茂名总店</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="付款类型">
              <Select clearable placeholder="付款类型">
                <Option value="预付款">预付款</Option>
                <Option value="补款">补款</Option>
                <Option value="全款">全款</Option>
                <Option value="升级">升级</Option>
                <Option value="降级">降级</Option>
                <Option value="退单">退单</Option>
                <Option value="保留金">保留金</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="支付类型">
              <Select clearable placeholder="支付类型">
                <Option value="微信支付">微信支付</Option>
                <Option value="支付宝支付">支付宝支付</Option>
                <Option value="现金支付">现金支付</Option>
                <Option value="POS机">POS机</Option>
                <Option value="在线支付-微信">在线支付-微信</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="业绩人">
              <Select clearable placeholder="业绩人">
                <Option value="滢滢">滢滢</Option>
                <Option value="晚霞（丹丹号）">晚霞（丹丹号）</Option>
                <Option value="小敏">小敏</Option>
                <Option value="总店妹姐">总店妹姐</Option>
                <Option value="小静">小静</Option>
                <Option value="李思">李思</Option>
                <Option value="廉江黄宇">廉江黄宇</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="时间">
              <DatePicker clearable format="yyyy-MM-dd" type="date" placeholder="时间"></DatePicker>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem  prop="imgRemark">
              <div slot="label">
               图片凭证
               <span style="">(图片小于2M)</span>
              </div>
              <el-upload
                action="11"
                :http-request="kzRemarksUpload"
                :limit="1"
                :file-list="attach_list"
                list-type="picture-card"
                compress="false"
                :on-exceed="handlePictureCardExceed"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                >
                <i class="el-icon-camera"></i>
              </el-upload>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
    <el-dialog top="2vh" :append-to-body="true" z-index="2000" custom-class="preview-dialog" title="图片预览" :visible.sync="imgDialogVisible2" width="80%">
      <img class="imagePreview" :src="rowData.image_note" alt="">
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        rowData: {},
        feeColumns: [{
            title: '员工',
            key: 'name'
          },
          {
            title: '金额',
            key: 'age'
          },
          {
            title: '付款类型',
            key: 'address'
          },
          {
            title: '支付类型',
            key: 'address'
          },
          {
            title: '图片凭证',
            key: 'address'
          },
          {
            title: '审核状态',
            key: 'address'
          },
          {
            title: '时间',
            key: 'address'
          },
          {
            title: '操作',
            key: 'address'
          }
        ],
        feeData: [],
        attach_list: [],
        imgDialogVisible2: false,
        addFeeModal: false,
        addFeeForm: {},
        addFeeFormFules: {
          'trackingData.tracking_type': [
            { required: true, message: '跟踪类型必填' }
          ],
        }
      }
    },
    watch: {
      '$store.state.layout.app.rowData'(newValue, oldValue) {
        this.rowData = newValue
      }
    },
    created() {
      this.rowData = this.$store.state.layout.app.rowData
    },
    methods: {
      addFee() {
        this.addFeeModal = true
      },
      ok() {

      },
      cancel() {

      },
      // 上传客资备注图片
      kzRemarksUpload(file) {
        console.log(file);
        const isLt2M = file.file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
        	this.$message.error("上传图片大小不能超过 2MB!");
        	return false;
        }
        const formData = new FormData();
        formData.append("image", file.file);
        upload_image(formData).then(res => {
          console.log('上传图片', res);
          if (res.rstpCode === '0000') {
            this.rowData.image_note = process.env.VUE_APP_BASE_SERVE + res.data[0].url
          }
        })
      },
      handlePictureCardExceed(files, fileList) {
         this.$Message.error('最多上传一张图片');
      },
      handlePictureCardPreview(file) {
        this.imgDialogVisible2 = true
      },
      handleRemove(file, fileList) {
        this.rowData.image_note = ''
      }
    },
  }
</script>

<style scoped lang="less">
  .feePage {
    padding: 10px;
    font-size: 12px;
  }
</style>
